<script setup lang="ts">
import { computed, ref } from "vue";
import type Typings from "@plugins/typings";

const formData = ref({
  name: "",
  desc: "",
  hobit: 1,
  sport: [],
  job: "",
  message: "重要信息",
  other: null,
});

const formJson = computed<Typings.DynamicForm.JsonType[]>(() => {
  return [
    {
      el: "input",
      span: 12,
      prop: "name",
      label: "名称",
      rules: [{ required: true, message: "名称不能为空", trigger: ["blur"] }],
    },

    {
      isHide: () => {
        return true;
      },
      el: "textarea",
      span: 24,
      prop: "desc",
      label: "简介",
      rules: [{ required: true, message: "简介不能为空", trigger: ["blur"] }],
    },

    {
      el: "select",
      span: 12,
      prop: "hobit",
      label: "爱好",
      rules: [{ required: true, message: "爱好不能为空", trigger: ["change"] }],
      options: [
        { name: "选项一", code: 1 },
        { name: "选项二", code: 2 },
        { name: "选项三", code: 3 },
      ],
      on: {
        change(val: number) {
          if (val === 1) {
            console.log("9999999999");
          }
        },
      },
    },

    {
      isHide() {
        return formData.value.hobit === 2;
      },
      el: "checkbox",
      span: 12,
      prop: "sport",
      label: "运动",
      rules: [{ required: true, message: "运动不能为空", trigger: ["change"] }],
      options: [
        { name: "篮球", code: 1 },
        { name: "足球", code: 2 },
        { name: "桌球", code: 3 },
      ],
    },

    {
      el: "date-picker",
      span: 12,
      prop: "birth",
      label: "生日",
      rules: [{ required: true, message: "生日不能为空", trigger: ["change"] }],
    },

    {
      el: "radio",
      span: 12,
      prop: "job",
      label: "工作",
      rules: [{ required: true, message: "工作不能为空", trigger: ["change"] }],
      options: [
        { name: "前端", code: 1 },
        { name: "后端", code: 2 },
        { name: "其他", code: 3 },
      ],
    },

    {
      el: "cascader",
      span: 12,
      prop: "project",
      label: "项目",
      rules: [{ required: true, message: "项目不能为空", trigger: ["change"] }],
      options: [
        {
          name: "云南项目",
          code: "yn",
          children: [
            {
              name: "招标",
              code: "yn-invitation",
            },
            {
              name: "投标",
              code: "yn-tender",
            },
          ],
        },
      ],
    },

    {
      el: "slot",
      span: 24,
      prop: "message",
      label: "重要信息",
      rules: [
        { required: true, message: "重要信息不能为空", trigger: ["blur"] },
      ],
    },
  ];
});

const formIns = ref();
const handleValidate = async () => {
  await formIns.value.instance.validate();
};
</script>

<template>
  <div>
    {{ formData }}
    <xt-dynamic-form ref="formIns" :data="formData" :formJson="formJson">
      <template #message>
        <xt-input
          v-model="formData.message"
          type="textarea"
          maxlength="1000"
        ></xt-input>
      </template>
    </xt-dynamic-form>

    <xt-button @click="handleValidate">校验</xt-button>
  </div>
</template>
